<template>
	<transition name="fade">
		<div class="bulletin-wrapper" v-show="showBulletin">
			<div class="bulletin-cont">
				<div class="bulletin-detail">
					<h1 class="title">{{seller.name}}</h1>
					<div class="star">
						<star :size="24" :score="seller.score"></star>
					</div>
					<div class="discountMsg">
						<div class="common-title">
							<span></span>
							<p>优惠信息</p>
							<span></span>
						</div>
						<div class="discountMsg-cont" v-if="seller.supports">
							<div
								class="icon"
								v-for="(item, index) in seller.supports"
								:key="item.id"
							>
								<support-ico :size="2" :type="seller.supports[index].type"></support-ico>
								<span class="icon-msg">{{item.description}}</span>
							</div>
						</div>
					</div>
					<div class="businessBulletin">
						<div class="common-title">
							<span></span>
							<p>商家公告</p>
							<span></span>
						</div>
						<div class="businessBulletin-cont">
							<p class="businessBulletin-cont-detail">{{seller.bulletin}}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="win-close" @click="hideB">
				<i class="icon-close"></i>
			</div>
		</div>
	</transition>
</template>

<script type="text/javascript">
	import supportIco from 'components/support-ico/support-ico'
	import Star from 'components/star/Star'

	export default {
		name: 'Bulletin',
		data () {
			return {
				showBulletin: false
			}
		},
		props: {
			//zy
			seller: {
				type: Object
			}
		},
		methods: {
			showB () {
				this.showBulletin = true
			},
			hideB () {
				this.showBulletin = false
			}
		},
		components: {
			supportIco,
			Star
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/variable'
	.bulletin-wrapper
		position: fixed
		top: 0
		left: 0
		width: 100%
		height: 100%
		overflow: auto
		background-color: $color-background-s
		color: $color-white
		opacity: 1;
		&.fade-enter-active, &.fade-leave-active {
			transition: all .5s;
		}
		&.fade-enter, &.fade-leave-to {
			opacity: 0
			background-color: $color-background
		}
		.bulletin-cont
			width: 100% 
			min-height: 100%
			.bulletin-detail
				padding: 64px 0 66px 0
				box-sizing: border-box
				.title
					font-size: $fontsize-large
					text-align: center
					font-weight: 350
					line-height: 16px
					color: #fff
				.star
					margin-top: 16px
					line-height: 24px
					text-align: center
				.common-title
					display: flex
					width: 80%
					margin: 28px auto 24px  auto
					font-size: 0
					text-align: center
				.common-title
					span
						display: inline-block
						flex: 1
						position: relative
						top: -6px
						border-bottom: 1px solid rgba(255,255,255,.2)
				.common-title
					p
						padding: 0 12px
						font-size: $fontsize-small
				.discountMsg-cont
					margin-left: 48px
					.icon
						display: flex
						align-items: center
						line-height: 16px
						margin-bottom: 12px
						&:last-child
							margin-bottom: 0
						.icon-msg
							font-size: $fontsize-small
							line-height: 16px
							margin-left: 6px
				.businessBulletin-cont
					margin: 24px 48px 0 48px
					.businessBulletin-cont-detail
						font-size: $fontsize-small
						font-weight: 100
						color: #fff
						line-height: 24px
		.win-close
			margin: -66px auto 0 auto
			width: 32px
			height: 34px
			font-size: 32px
			color: rgba(255, 255, 255, .5)
</style>
